<!-- 七日销售趋势 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'七日销售趋势'"></contentTitle>
        <div class="yz-common-small-title">
          <div class="yz-common-title-navs top2">
            <div :class="['yz-common-title-nav',{'selected':item.selected}]" v-for="(item,index) in qrxsqs_navs" @click="qrxsqsClick(index)">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
        <div class="layChart" ref="qrxsqsRef"></div>
      </div>

      <div class="layer-bottom">
        <div class="pd_abItems-contain" style="justify-content: left">
          <div class="pd_abItems-main">
            <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
          </div>
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区" @change="serverHandleChange" filterable clearable></el-cascader>
          </div>
          <div class="pd-abItem-search" style="position: relative">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";
const chart = getCurrentInstance().proxy.$echarts

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

const curServer = ref(""),curFristYear = ref(""),curSecYear = ref("");


//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '1',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '2',
    label: '丰润停车区'
  }]
}])

const serverHandleChange = (selectItem) => {
  curServer.value = selectItem

}

const fristMonthOptions = ref([{value:'1月', label:'1月'},{value:'2月', label:'2月'},{value:'3月', label:'3月'}])
const secondMonthOptions = ref([{value:'1月', label:'1月'},{value:'2月', label:'2月'},{value:'3月', label:'3月'}])

const fristYearHandleChange = function (selectItem){
  console.log(selectItem);
}

const secondYearChange = function (selectItem){
  console.log(selectItem);
}

const areacode = ref(null)
const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
const abItemsClick = function (item){
  abItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })
  if(item.title === '综合'){
    areacode.value = null
  }
  else if(item.title === '东(南)'){
    areacode.value = "01"
  }
  else if(item.title === '西(北)'){
    areacode.value = "02"
  }
}

const search = function (){
  refreshData()
}

const qrxsqs_x = ref([])
const qrxsqs_y_1 = ref([])
const qrxsqs_navs = ref([{name:'全业态',selected:false},{name:'油站',selected:false},{name:'加气',selected:false},{name:'充电',selected:false},{name:'超市',selected:false},{name:'餐厅',selected:true},{name:'客房',selected:false},{name:'物业',selected:false}])
const qrxsqs_modetype = ref(1);


const qrxsqsClick = function (selectIndex){
  console.log(selectIndex)

  qrxsqs_navs.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
  });
  
  if(selectIndex==0){
    qrxsqs_modetype.value = null;
  }else if(selectIndex==1){
    qrxsqs_modetype.value = 3;
  }else if(selectIndex==2){
    qrxsqs_modetype.value = 8;
  }else if(selectIndex==3){
    qrxsqs_modetype.value = 5;
  }else if(selectIndex==4){
    qrxsqs_modetype.value = 0;
  }else if(selectIndex==5){
    qrxsqs_modetype.value = 1;
  }else if(selectIndex==6){
    qrxsqs_modetype.value = 4;
  }else if(selectIndex==7){
    qrxsqs_modetype.value = 6;
  }

  refreshData();
  console.log(qrxsqs_navs)
  //刷新数据
}

const qrxsqsRef = ref();
const qrxsqsOpt = ref({
  color: ['#F7B500'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    top: '35%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: qrxsqs_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisTick:{
        show: false
      },
      axisLabel: {
        interval:0,
        rotate: 0,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "万（元）",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: qrxsqs_y_1.value
    }
  ]
});

let qrxsqsChart
onMounted(() => {
  qrxsqsChart = drawLine(qrxsqsRef.value,qrxsqsOpt.value);
  getFwqxx()
  refreshData()
})


async function refreshData() {
  const params = {
    compid: curServer.value[1],
    areacode:areacode.value,
    modetype:qrxsqs_modetype.value
  }

  qrxsqs_x.value = []
  qrxsqs_y_1.value = []
  const result = await ajaxRequest('post', 'getQrxsqs', params)
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      qrxsqs_x.value.push(item.zjts+"天")
      qrxsqs_y_1.value.push(item.taxsaleamnt)
    })
  }
  qrxsqsOpt.value.xAxis[0].data = qrxsqs_x.value
  qrxsqsOpt.value.series[0].data = qrxsqs_y_1.value
  qrxsqsChart.setOption(qrxsqsOpt.value)
}

/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}
</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left:20vh;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 16.3vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 22vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

.yz-common-title-navs {
  display: flex;
  position: absolute;
  font-size: 12px;
  right: 5.4vh;
  top: 12.5vh;
  z-index: 1000;
  justify-content: flex-end;
  width: 50vh;
  
  .yz-common-title-nav {
    color: #ffffff;
    padding: 0 5px;
    cursor: pointer;
    font-style: normal;
    border-right: 1px solid #ffffff;

  }
  .yz-common-title-nav:last-of-type {
    border-right: none;
  }
  .yz-common-title-nav.selected {
    span{
      border-bottom: 2px solid #3DBDC8;
    }
  }
}

</style>